<template>
<!-- TODO 更改删除地址 -->
  <div class="Address">
    <div class="addresstop">
      <span class="addressfont" @click="$router.back()"><</span>
      <div>
        <h1>添加地址</h1>
      </div>
    </div>
      <div class="list" style="border:none;padding:0;">
        <div class="tr">
          <h3>联系人</h3>
        </div>
        <div class="inputright" style="border-bottom: 1px solid gainsboro;">
          <input
            type="text"
            placeholder="姓名 1~6个字符"
            v-model="name"
            style="padding:20px 0 20px 0;"
            autocomplete="off"
            maxlength="6"
          />
        </div>
      </div>
      <div class="list">
        <div class="tr"></div>
        <div class="inputright">
          <input type="radio" name="sex" id="man" value="先生" v-model='sex'/>
          <input type="radio" name="sex" id="woman" value="女士" v-model='sex'/>
          <label for="man">
            <div type="button" class="sexbtn">先生</div>
          </label>
          <label for="woman">
            <div type="button" class="sexbtn">女士</div>
          </label>
        </div>
      </div>
      <div class="list">
        <div class="tr">
          <h3>电话</h3>
        </div>
        <div class="inputright">
          <input
            type="text"
            name="phonenum"
            v-model="phonenum"
            placeholder="联系号码"
            autocomplete="off"
            maxlength="11"
          />
        </div>
      </div>
      <div class="list">
        <div class="tr">
          <h3>楼号</h3>
        </div>
        <div class="inputright">
          <input type="text" name="lou" v-model="lou" placeholder="如 4号公寓楼" autocomplete="off" />
        </div>
      </div>
      <div class="list">
        <div class="tr">
          <h3>门牌号</h3>
        </div>
        <div class="inputright">
          <input type="text" name="su" v-model="su" placeholder="如 304" autocomplete="off" />
        </div>
      </div>
      <button class="btn"  @click="suresubmit">确定</button>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';
export default {
  name: "Address",
  data() {
    return {
      name: "",
      phonenum: "",
      lou: "",
      su: "",
      sex:'先生',
      btntype: "submit"
    };
  },
  methods: {
    ...mapMutations(['setdresslist']),
    rephone() {
      if (/^1[3456789]\d{9}$/.test(this.phonenum)) {
        return true;
      } else {
        return false;
      }
    },
    suresubmit() {
      if (this.name == "") {
        alert("用户名不能为空");
        this.btntype = "button";
      }else if (this.lou == "") {
        alert("公寓楼号不能为空");
        this.btntype = "button";
      }
       
      else if (this.su == "") {
        alert("宿舍号不能为空");
        this.btntype = "button";
      }
      else if (this.phonenum == "") {
        alert("联系号码不能为空");
        this.btntype = "button";
        return;
      }
      else if (!this.rephone()) {
        alert("联系号码格式有误");
        this.btntype = "button";
      }
      else{
        this.axios.post('http://127.0.0.1:3000/address',{phone:this.$store.state.phone,name:this.name,sex:this.sex,dressphone:this.phonenum,lou:this.lou,su:this.su})
        .then((res)=>{
          this.$store.commit('setdresslist',res.data.msg)
          this.$router.push('/dress')
        })
        .catch((err)=>{
          console.log(err)
        })
      }
    }
  },
};
</script>

<style scoped>
input[type="radio"] {
  display: none;
}
.list {
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  border-bottom: 1px solid gainsboro;
  padding: 20px 0 20px 0;
}
.tr {
  text-align: left;
  width: 20%;
}
.inputright {
  width: 80%;
}
.inputright input {
  outline: none;
  background: none;
  border: none;
  height: 20px;
  font-size: 20px;
  padding: 10px 0 10px 0;
}
.inputright .sexbtn {
  display: inline-block;
  text-align: center;
  line-height: 32px;
  width: 80px;
  height: 38px;
  outline: none;
  background: white;
  border: 1px solid gainsboro;
  border-radius: 5px;
  margin-right: 15px;
  font-size: 18px;
}
#man:checked + #woman + label .sexbtn {
  background: rgb(238, 247, 255);
  color: rgb(35, 149, 255);
}
#woman:checked + label + label .sexbtn {
  background: rgb(238, 247, 255);
  color: rgb(35, 149, 255);
}
.addressfont {
  cursor: pointer;
  font-size: 28px;
}
.addresstop {
  padding: 5px;
  display: flex;
  background: rgb(0,160,255);
  color: white;
}
.addresstop div {
  margin: 0 auto;
}
.btn {
  display: block;
  outline: none;
  border: none;
  background: rgb(0, 215, 98);
  width: 80%;
  height: 48px;
  font-size: 20px;
  margin: 20px auto;
  color: white;
}
</style>